<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/xadmin.js"></script>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <style>
        #chart-wrap {
            width: 670px;
            height: 240px;
            position: relative;
            top: 20px;
            left: 20px;
            margin-bottom: 20px;
        }

        #foodContent {
            padding-left: 20px;
            padding-top: 40px;
        }

        #foodContent2 {
            padding-left: 20px;
            padding-top: 40px;
        }

        .foodContainer {
            border: 1px solid lightgray;
            text-align: center;
            background-color: white;
            width: 190px;
            height: 250px;
            margin-left: 30px;
            margin-bottom: 25px;
        }

        .foodContainer div {
            margin-top: 10px;

        }

        .foodContainer img {
            margin: 5px auto;
        }

        .foodPrice {
            color: rgb(240, 43, 43);
        }
    </style>
</head>
<script type="text/javascript">
    function showTime() {
        nowtime = new Date();
        year = nowtime.getFullYear();
        month = nowtime.getMonth() + 1;
        date = nowtime.getDate();
        document.getElementById("mytime").innerText = year + "年" + month + "月" + date + "日  " + nowtime.toLocaleTimeString('chinese', {hour12: false});
    }

    setInterval("showTime();", 1000);
</script>
<body>
<div class="x-body layui-anim layui-anim-up">
    <blockquote class="layui-elem-quote">欢迎：
        <span class="x-red">${worker.workerName}</span>！当前时间:<span id="mytime"></span>&emsp;&emsp;&emsp;
        <span class="x-red">注意：</span>&nbsp;每天的预约开启时间是:<span class="x-red">22:00</span>！&emsp;可以预约时间是第二天<span class="x-red">08:00——24:00</span>！
    </blockquote>
    <fieldset class="layui-elem-field" style="margin: 20px">
        <legend>数据统计</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside"
                             lay-arrow="none" style="width: 100%; height: 90px;">
                            <div carousel-item="">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>今日订单</h3>
                                            <p>
                                                <cite id="todayOrder">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>会员数</h3>
                                            <p>
                                                <cite id="memberCount">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>今日营业额</h3>
                                            <p>
                                                <cite id="todayMoney">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>当前正在用餐桌数</h3>
                                            <p>
                                                <cite id="useTable">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>菜品数量</h3>
                                            <p>
                                                <cite id="foodCount">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>员工数量</h3>
                                            <p>
                                                <cite id="workerNum">0</cite></p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field  site-demo-button" style="margin: 20px">
        <legend>今日最热产品</legend>
        <div class="layui-tab-content" id="foodContent">
            <div class="layui-tab-item layui-show foodContent" id="foodContent0">

            </div>
            <fieldset class="layui-elem-field  site-demo-button" style="margin: 20px">
                <legend>热门推荐-历史销量排行</legend>
                <div class="layui-tab-item layui-show foodContent" id="foodContent1">

                </div>
            </fieldset>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field">
        <legend>关于小狮子餐馆</legend>
        <div class="layui-field-box">
            <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                    <td>
                        <a class="x-a"  target="_blank">以传统川菜为根，吸取中原各大菜系之百炼精髓，融会贯通，不断创新与扩展，扬己所长，独具特色。！</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a class="x-a"  target="_blank">店长联系电话：15183095132</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field">
        <legend>系统开发团队</legend>
        <div class="layui-field-box">
            <table class="layui-table">
                <tbody>
                <tr>
                    <th>开发者</th>
                    <td>邬鑫(244408850@qq.com)</td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</div>

<script>
    // 获取今日营业额
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findOrderMoneyByDay",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                $('#todayMoney').text(parseFloat(data.data[7]));
            }
        }
    });

    // 获取今日订单数
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findOrderCountByDay",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                $('#todayOrder').text(data.data);
            }
        }
    });

    // 获取当前会员数量
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/member?m=listMember&page=1&limit=10",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#memberCount').text(data.count);
            }
        }
    });

    // 获取当前正在使用的餐桌数
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/table?m=findTableCodeByParams&tableIsDeleted=0&page=1&limit=10&tableStatus=1",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#useTable').text(data.count);
            }
        }
    });

    // 获取菜品数量
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/food?m=foodList&foodIsDeleted=0&page=1&limit=10",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#foodCount').text(data.count);
            }
        }
    });

    // 获取员工数量
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/baseInfo?m=workerManage&workerIsDeleted=0&page=1&limit=10",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#workerNum').text(data.count);
            }
        }
    });

    // 获取今日最热菜品
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findPopularFood",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                //$(".foodContainer").empty();
                $("#foodContent0").empty();
                $("#foodContent0").append("<div class='layui-col-md2 foodContainer' style='margin-right: 47px;' id='food" + data.data.foodId + "'></div>");
                $("#food" + data.data.foodId).append('<img  src="/upload/' + data.data.foodImg + '" width="170px" height="150px" alt="">\n' +
                    '                <div class="foodName"><h5>' + data.data.foodName + '</h5></div>\n' +
                    '                <div class="foodPrice">今日销量：' + data.count + '</div>\n')

            }
            if (data.code == 1001) {
                //$(".foodContainer").empty();
                $("#foodContent0").empty();
                $("#foodContent0").append("<div class='layui-col-md2 foodContainer' style='margin-right: 47px;' id='food0'></div>");
                $("#food0").append('<img  src="/upload/empty.jpg" width="170px" height="150px" alt="">\n' +
                    '                <div class="foodName"><h5>暂无今日热门</h5></div>\n')

            }
        }
    });

    // 获取累计销量的食品
    $.ajax({
        async: false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=find4PopularFood",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                //$(".foodContainer").empty();
                $("#foodContent1").empty();
                $(data.data).each(function () {
                    $("#foodContent1").append("<div class='layui-col-md2 foodContainer' id='aFood" + this.foodId + "'></div>");
                    $("#aFood" + this.foodId).append('<img  src="/upload/' + this.foodImg + '" width="170px" height="150px" alt="">\n' +
                        '                <div class="foodName"><h5>' + this.foodName + '</h5></div>\n' +
                        '                <div class="foodPrice">总销量：' + this.page + '</div>\n')
                });
            }
        }
    });
</script>
</body>

</html>